<template>
	<view style="width: 100%;background-color: white;">
		<view style="width: 100%;height: 100vh;overflow-y: scroll;">
			<view style="margin: 0 0rpx;border-radius: 30rpx;width: calc(100% - 0rpx);">
				<view v-for="(item,index) in introImages1" :style="index == 0 ? '':{'margin-top':-20 + 'rpx'}">
					<view style="display: grid;grid-template-areas: 'stack'; ">

						<view style="grid-area: stack;" class="firstbg">
							<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;" mode="widthFix">
							</image>
						</view>
					</view>
				</view>
				<view class="" style="background-color: white;width: 100%;">
					<view class="" style="display: flex;flex-wrap: wrap;width: 100%;">
						<view v-for="(item,index) in members1"
							style="width: 50%;margin-top: -20rpx;display: grid;grid-template-areas: 'stack'; ">
							<image :src="item" style="width:100%;grid-area: stack;" mode="widthFix">
							</image>
							<view
								style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 0rpx;">
								<image :src="buybtn" style="width: 200rpx;grid-area: stack;" mode="widthFix"
									@click="buyNow(index)"
									:style="index%2 == 0 ? {'margin-left':20+'rpx'}:{'margin-right':20+'rpx'}">
								</image>
							</view>

						</view>
					</view>
				</view>
				<view v-for="(item,index) in introImages2" style="margin-top: -10rpx;">
					<view style="display: grid;grid-template-areas: 'stack'; ">

						<view style="grid-area: stack;" class="firstbg">
							<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;" mode="widthFix">
							</image>
						</view>
					</view>
				</view>
				<view class="" style="background-color: white;width: 100%;">
					<view class="" style="display: flex;flex-wrap: wrap;width: 100%;">
						<view v-for="(item,index) in members2"
							style="width: 50%;margin-top: -20rpx;display: grid;grid-template-areas: 'stack'; ">
							<image :src="item" style="width:100%;grid-area: stack;" mode="widthFix">
							</image>
							<view
								style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 0rpx;">
								<image :src="buybtn" style="width: 200rpx;grid-area: stack;" mode="widthFix"
									@click="buyNowBottom(index)"
									:style="index%2 == 0 ? {'margin-left':20+'rpx'}:{'margin-right':20+'rpx'}">
								</image>
							</view>

						</view>
					</view>
				</view>
				<view v-for="(item,index) in introImages3" style="margin-top: -12rpx;">
					<view style="display: grid;grid-template-areas: 'stack'; ">
						<view style="grid-area: stack;" class="firstbg">
							<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;" mode="widthFix">
							</image>
						</view>

						<view v-if="index == 0"
							style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 40rpx;">
							<image :src="lqyh" class="addwxbtn" mode="widthFix" @click="showPop()">
							</image>
						</view>
						<view v-if="index == 2"
							style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 40rpx;">
							<image :src="qydb" class="addwxbtn" mode="widthFix" @click="showPop()">
							</image>
						</view>
					</view>
				</view>
				<view class="" style="background-color: white;width: 100%;margin-top: -20rpx;">
					<view class="" style="display: flex;flex-wrap: wrap;width: 100%;">
						<view v-for="(item,index) in courses"
							style="flex: 1;margin-top: 0rpx;display: grid;grid-template-areas: 'stack'; ">
							<image :src="item" style="width:100%;height: 300rpx;grid-area: stack;">
							</image>
							<view
								style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: -10rpx;">
								<image :src="viewdetail" style="width: 180rpx;" mode="widthFix"
									:style="index == 0 ? {'margin-left':30+'rpx'}:(index == 1?'':{'margin-right':30+'rpx'})"
									@click="goCourseDetail(index)">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view class="" style="background-color: white;width: 100%;margin-top: -2rpx;">
					<view class="" style="width: 100%;">
						<view style="margin-top: 0rpx;display: grid;grid-template-areas: 'stack'; ">
							<image :src="courseHeng" style="width:100%;grid-area: stack;" mode="widthFix">
							</image>
							<view
								style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: -10rpx;">
								<image :src="viewdetail"
									style="width: 180rpx;float: right;margin-right: 50rpx;margin-bottom: 28rpx;"
									mode="widthFix" @click="goCourseDetail(3)">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view v-for="(item,index) in introImages4" style="margin-top: -2rpx;">
					<view style="display: grid;grid-template-areas: 'stack'; ">
						<view style="grid-area: stack;" class="firstbg" v-if="index != 4 && index != 5">
							<image :src="item" style="width: 100%;margin: -10rpx 0 0 0;" mode="widthFix">
							</image>
						</view>
						<view v-else style="position: relative;" class="">
							<image :src="item" style="width: 100%;margin: -10rpx 0 0 0;" mode="widthFix">
							</image>
							<image :src="coursedetail" style="width: 240rpx;position: absolute;right: 50rpx;top: 30rpx;"
								mode="widthFix" @click="otherCourseDetail(index)">
							</image>
						</view>

						<view v-if="index == 0"
							style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: -10rpx;">
							<image :src="yuepai" class="addwxbtn" mode="widthFix" @click="showPop()">
							</image>
						</view>
						<view v-if="index == 2"
							style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 40rpx;">
							<image :src="zhyh" class="addwxbtn" mode="widthFix" @click="showPop()">
							</image>
						</view>
						<view v-if="index == 7"
							style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 80rpx;">
							<image :src="xxms" class="addwxbtn" mode="widthFix" @click="showPop()">
							</image>
						</view>
						<!-- 						<view v-if="index == introImages4.length - 1"
							style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 40rpx;">
							<image :src="zxyh" style="width: 100%;" mode="widthFix" @click="showPop()">
							</image>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;position: fixed;left:0;bottom:0;margin-bottom: 20rpx;">
			<image :src="zxyh" style="width: 100%;" mode="widthFix" @click="showPop()">
			</image>
		</view>
		<delayPop ref="vipPop"></delayPop>
	</view>
</template>
<script>
	import {
		getMyHome,
		getVipTypeList,
		getVipDetailImage,
		getVipRenewStatus,
		addClickRecord
	} from '@/api/home.js';
	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";

	import animationType from '@/utils/animationType.js'
	import delayPop from './components/delayPop.vue';
	const comUrl =
		"https://pic.mae.vip/%E4%BA%BA%E5%83%8F%E5%AE%9E%E6%88%98%E7%8F%AD%E7%B4%A0%E6%9D%90/%E6%8E%A8%E8%8D%90%E6%B4%BB%E5%8A%A8/";
	const app = getApp();
	export default {
		components: {
			delayPop
		},
		data() {
			return {
				introImages1: [
					comUrl + '01_01.jpg'
				],
				introImages2: [
					comUrl + 'aaa_03.jpg'
				],
				introImages3: [
					comUrl + 'aaa_02.jpg', comUrl + 'aaa_04.jpg', comUrl + 'aaa_05.jpg', comUrl + 'aaa_06.jpg'
				],
				introImages4: [
					comUrl + 'aaa_08.jpg', comUrl + '01_06.jpg', comUrl + 'aaa_10.jpg', comUrl + '02_02.jpg',
					comUrl + '02_03.jpg', comUrl + '02_04.jpg', comUrl + '02_05.jpg', comUrl + '02_06.jpg', comUrl +
					'aaa_15.jpg',
					comUrl + 'aaa_16.jpg', comUrl + 'aaa_17.jpg', comUrl + 'aaa_18.jpg', comUrl + 'aaa_19.jpg'
				],
				members1: [
					comUrl + 'member_01.jpg', comUrl + 'member_02.jpg',
					comUrl + 'member_03.jpg',
					comUrl + 'member_04.jpg',
				],
				members2: [
					comUrl + 'member_05.jpg', comUrl + 'member_06.jpg',
					comUrl + 'member_07.jpg',
					comUrl + 'member_08.jpg',
				],
				courses: [
					comUrl + '02_01.jpg', comUrl + 'fg_01.jpg',
					comUrl + 'sp_01.jpg'
				],
				courseHeng: comUrl + '01_04.jpg',
				buybtn: comUrl + 'buybtn.png',
				lqyh: comUrl + 'lqyh.png',
				zxyh: comUrl + 'zxyh.png',
				qydb: comUrl + 'qydb.png',
				yuepai: comUrl + 'yuepai.png',
				zhyh: comUrl + 'zhyh.png',
				xjyh: comUrl + 'xjyh.png',
				xxms: comUrl + 'xxms.png',
				viewdetail: comUrl + 'viewdetail.png',
				coursedetail: comUrl + 'coursedetail.png',
				userId: '',
				phone: '',
				source: '2',
				token: '',
				vipMenus: [{
					'id': '10000',
					'price': '699'
				}, {
					'id': '10003',
					'price': '1999'
				}, {
					'id': '10001',
					'price': '199'
				}, {
					'id': '10002',
					'price': '399'
				}, {
					'id': '158',
					'price': '999'
				}, ],
			}
		},
		mounted: function() {
			let that = this;

			//let locatiojUrl =
			//	'http://10.10.8.15:8080/qz/?phone=13012562102&token=1202bdc5effd1ecbbd447deec7a6f78b&userId=337538';

			let locatiojUrl = window.location.href;

			//that.phone = decodeURI(that.jqueryUrl(locatiojUrl).phone);
			that.userId = decodeURI(that.jqueryUrl(locatiojUrl).userId);
			that.token = decodeURI(that.jqueryUrl(locatiojUrl).token);
			that.goLogin();
		},
		methods: {
			goLogin() {
				let that = this;
				loginMobile({
						phone: '13012562102',
						captcha: '000000',
						spread_spid: 10001
					})
					.then(res => {
						let data = res.data;
						let newTime = Math.round(new Date() / 1000);
						that.$store.commit("LOGIN", {
							'token': res.data.token
						});
						that.$store.commit("SETUID", res.data.uid);
					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
			buyNow(i) {
				console.log(i);
				let that = this;
				let price = 0;
				let vipId = 0;
				if (i == 0) {
					price = 1699;
					vipId = 10003;
				} else if (i == 1) {
					price = 699;
					vipId = 10000;
				} else if (i == 2) {
					price = 399;
					vipId = 10002;
				} else if (i == 3) {
					price = 199;
					vipId = 10001;
				}
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/CouponOrder/index?id=' + vipId + '&price=' + price +
						'&userId=' + that
						.userId +
						'&source=' + that.source +
						'&orderType=' + '会员',
				})
			},
			buyNowBottom(i) {
				console.log(i);
				let that = this;
				let price = 0;
				let vipId = 0;
				if (i == 0) {
					price = 1699;
					vipId = 10003;
				} else if (i == 1) {
					price = 699;
					vipId = 10000;
				} else if (i == 2) {
					price = 399;
					vipId = 10002;
				} else if (i == 3) {
					price = 199;
					vipId = 10001;
				}
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/CouponOrder/index?id=' + vipId + '&price=' + price +
						'&userId=' + that
						.userId +
						'&source=' + that.source +
						'&orderType=' + '会员',
				})
			},
			showPop() {
				let that = this;
				that.$refs.vipPop.showPop();
			},
			goCourseDetail(index) {
				let that = this;
				if (index == 0) {
					uni.navigateTo({
						animationType: animationType.type,
						animationDuration: animationType.duration,
						url: '/pages/portraitMaster/index?couId=10090' + "&token=-1&userId=-1",
					})
				} else if (index == 1) {
					uni.navigateTo({
						animationType: animationType.type,
						animationDuration: animationType.duration,
						url: '/pages/portraitMaster/index?couId=10091' + "&token=-1&userId=-1",
					})
				} else if (index == 2) {
					uni.navigateTo({
						animationType: animationType.type,
						animationDuration: animationType.duration,
						url: '/pages/portraitMaster/index?couId=10092' + "&token=-1&userId=-1",
					})
				} else if (index == 3) {
					uni.navigateTo({
						animationType: animationType.type,
						animationDuration: animationType.duration,
						url: '/pages/portraitMaster/index?couId=10101' + "&token=-1&userId=-1",
					})
				}
			},
			otherCourseDetail(index) {
				console.log(index)
				if (index == 4) {
					uni.navigateTo({
						animationType: animationType.type,
						animationDuration: animationType.duration,
						url: '/pages/portraitMaster/index?couId=10089' + "&token=-1&userId=-1",
					})
				}
				if (index == 5) {
					uni.navigateTo({
						animationType: animationType.type,
						animationDuration: animationType.duration,
						url: '/pages/portraitMaster/index?couId=10089' + "&token=-1&userId=-1",
					})
				}
			},
			jqueryUrl(url) {
				let arr = url.split('?');
				let params = arr[1].split('&');
				let obj = {};
				for (let i = 0; i < params.length; i++) {
					let param = params[i].split('=');
					obj[param[0]] = param[1];
				}
				return obj;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		width: 100%;
		background-color: white;
	}

	.addwxbtn {
		width: 400rpx;
	}

	.addwxbtn_last {
		width: 100%;
	}

	.firstbg {
		position: relative;
		display: inline-block;
		/* 确保容器适应图片大小 */
	}

	.lookmore {
		position: absolute;
		top: 50rpx;
		right: 30rpx;
	}

	.zhuanshu-container {
		display: flex;
		margin: 0 30rpx;
		width: calc(100% - 60rpx);
		/* 容器宽度 */
		gap: 0rpx;
		/* 图片之间的间距，可选 */
	}

	.zhuanshu-container image {
		flex: 1;
		/* 三等分关键代码 */
		width: auto;
		/* 修复某些浏览器的兼容性问题 */
		height: auto;
		/* 保持图片比例 */
		// object-fit: cover;
		/* 可选，控制图片如何填充空间 */
	}

	.image-container {
		display: flex;
		margin: 0 30rpx;
		width: calc(100% - 60rpx);
		/* 容器宽度 */
		gap: 40rpx;
		/* 图片之间的间距，可选 */

	}

	.image-container image {
		flex: 1;
		/* 三等分关键代码 */
		width: auto;
		/* 修复某些浏览器的兼容性问题 */
		height: auto;
		/* 保持图片比例 */
		// object-fit: cover;
		/* 可选，控制图片如何填充空间 */
	}
</style>